<template>
	<view class="user">
		<view class="navbar">
			<view :style="{ height: sysHeight+'px' }"></view>
			<view class="navbarH acea-row row-center row-middle">
				<view class="title">个人中心</view>
			</view>
		</view>
		<view :style="{height:(sysHeight+50)+'px'}"></view>
		
		<view class="acea-row row-between-wrapper top px30">
			<view class="acea-row row-middle">
				<view class="avatar" @click="goEdit()">
					<image :src="userinfo.avatar" mode="" v-if="userinfo.avatar"></image>
					<image src="/static/images/f.png" mode="" v-else></image>
				</view>
				<view class="ml20">
					<view class="acea-row row-middle">
						<view class="color333 fs-40 bold">{{ userinfo.nickname || '请授权' }}</view>
						<view class="ml10">
							<image v-if="userinfo.level==1" class="vip-icon" src="https://yijiaan.oss-cn-hangzhou.aliyuncs.com/pic/level01.png" mode="aspectFit"></image>
							<image v-if="userinfo.level==2" class="vip-icon" src="https://yijiaan.oss-cn-hangzhou.aliyuncs.com/pic/level02.png" mode="aspectFit"></image>
							<image v-if="userinfo.level==3" class="vip-icon" src="https://yijiaan.oss-cn-hangzhou.aliyuncs.com/pic/level03.png" mode="aspectFit"></image>
						</view>
					</view>
					<view class="fs-34 color555 mt10">ID: {{ userinfo.uid || 0 }}</view>
				</view>
			</view>
			<view class="acea-row row-column row-center row-middle message-nav" @click.stop="pathclick(`/pages/other/message`)">
				<image class="message-icon" src="https://yijiaan.oss-cn-hangzhou.aliyuncs.com/pic/message-icon.png" mode="aspectFit"></image>
				<text class="color555 fs-28">我的消息</text>
				<text class="msg">{{ userinfo.noticeCount }}</text>
			</view>
		</view>
		
		<view class="guanjia-nav">
			<view class="acea-row row-column row-between" @click.stop="pathclick(`/pages/other/serve-user`)">
				<view class="fs-44 color333 bold">管家工作台</view>
				<view class="liji">立即前往</view>
			</view>
			<view>
				<image class="info01" src="https://yijiaan.oss-cn-hangzhou.aliyuncs.com/pic/info01.png" mode="aspectFit"></image>
			</view>
		</view>
		
<!-- 		<view class="acea-row row-between-wrapper px30" style="background-image: linear-gradient(to bottom,#ffffff,#f2f2f2);">
			<view class="info acea-row row-between p30" v-if="false">
				<view style="width: 280rpx;" class="acea-row row-column row-between">
					<view class="fs-44 color333">我们为你匹配专家</view>
					<view class="pipei">立即前往</view>
				</view>
				<view>
					<image class="info01" src="https://yijiaan.oss-cn-hangzhou.aliyuncs.com/pic/info01.png" mode="aspectFit"></image>
				</view>
			</view>管家工作台
			<view class="today">
				<view class="fs-34 color333">今日信息</view>
				<view class="acea-row row-middle mt20">
					<view class="">
						<image class="pictrue" src="https://yijiaan.oss-cn-hangzhou.aliyuncs.com/pic/banner.png" mode="aspectFit"></image>
					</view>
					<view class="acea-row row-column row-between ml20" style="height: 100rpx;">
						<view class="fs-34 color333">智慧养老套餐</view>
						<view class="themecolor fs-28">服务中</view>
					</view>
				</view>
				<view class="acea-row row-between-wrapper color555 fs-28 mt20">
					<view>提醒吃药：3次</view>
					<view>跌倒检测：2次</view>
				</view>
			</view>
			<view class="history acea-row row-middle row-center-wrapper row-column" @click.stop="pathclick(`/pages/other/history`)">
				<image class="history-icon" src="https://yijiaan.oss-cn-hangzhou.aliyuncs.com/pic/history-icon.png" mode="aspectFit"></image>
				<text class="color555 fs-32 mt10" style="width: 65rpx;">历史数据</text>
			</view>
		</view> -->
		
		<view class="acea-row row-between-wrapper p30">
			<view class="acea-row row-middle row-column row-center cate-item"  @click.stop="pathclick('/pages/answer/index')">
				<image class="icon" src="https://yijiaan.oss-cn-hangzhou.aliyuncs.com/pic/user01.png" mode="aspectFit"></image>
				<text class="fs-30 color333 mt10">健康数据</text>
			</view>
			<view class="acea-row row-middle row-column row-center cate-item" @click.stop="pathclick(`/pages/other/collect`)">
				<image class="icon" src="https://yijiaan.oss-cn-hangzhou.aliyuncs.com/pic/user02.png" mode="aspectFit"></image>
				<text class="fs-30 color333 mt10">我的收藏</text>
			</view>
			<view class="acea-row row-middle row-column row-center cate-item" @click.stop="pathclick(`/pages/package/index`)">
				<image class="icon" src="https://yijiaan.oss-cn-hangzhou.aliyuncs.com/pic/user03.png" mode="aspectFit"></image>
				<text class="fs-30 color333 mt10">我的套餐</text>
			</view>
		</view>
		
		<view class="acea-row catelist">
			<view class="item acea-row row-middle row-center row-column" @click.stop="pathclick(`/pages/other/family-number`)">
				<image class="icon" src="https://yijiaan.oss-cn-hangzhou.aliyuncs.com/pic/user04.png" mode="aspectFit"></image>
				<text class="fs-30 color333 mt10">亲情号码</text>
			</view>
			<view class="item acea-row row-middle row-center row-column" @click.stop="pathclick(`/pages/other/device`)">
				<image class="icon" src="https://yijiaan.oss-cn-hangzhou.aliyuncs.com/pic/user05.png" mode="aspectFit"></image>
				<text class="fs-30 color333 mt10">我的设备</text>
			</view>
			
			<block v-if="userinfo.is_promoter==1">
				<view class="item acea-row row-middle row-center row-column" @click.stop="pathclick(`/pages/users/user_spread_user/index`)">
					<image class="icon" src="https://yijiaan.oss-cn-hangzhou.aliyuncs.com/pic/tuiguang.png" mode="aspectFit"></image>
					<text class="fs-30 color333 mt10">我的推广</text>
				</view>
			</block>

			<view class="item acea-row row-middle row-center row-column" @click.stop="pathclick(`/pages/other/notice`)">
				<image class="icon" src="https://yijiaan.oss-cn-hangzhou.aliyuncs.com/pic/user06.png" mode="aspectFit"></image>
				<text class="fs-30 color333 mt10">用户须知</text>
			</view>
			<!-- <view class="item acea-row row-middle row-center row-column" @click.stop="pathclick(`/pages/other/serve-user`)">
				<image class="icon" src="https://yijiaan.oss-cn-hangzhou.aliyuncs.com/pic/serveyonghu.png" mode="aspectFit"></image>
				<text class="fs-30 color333 mt10">服务用户</text>
			</view> -->
			<view class="item acea-row row-middle row-center row-column" @click.stop="pathclick(`/pages/other/about`)">
				<image class="icon" src="https://yijiaan.oss-cn-hangzhou.aliyuncs.com/pic/tips-icon.png" mode="aspectFit"></image>
				<text class="fs-30 color333 mt10">关于我们</text>
			</view>
		</view>
		
		<tabbar :path="'/pages/user/user'"></tabbar>
		
		<suspension></suspension>
		
	</view>
</template>

<script>
	let sysHeight = uni.getSystemInfoSync().statusBarHeight;
	import tabbar from '@/components/tabbar.vue';
	import suspension from '@/components/suspension.vue';
	import {
		toLogin
	} from '@/libs/login.js';
	import{
		getUserInfo
	} from '@/api/user.js';
	import{
		noticeList
	} from '@/api/admin.js'
	import {
		mapState,
		mapGetters
	} from "vuex";
	export default {
		components:{
			tabbar,
			suspension
		},
		data() {
			return {
				sysHeight : sysHeight,
				userinfo:[],
				nlist:[],
				
			};
		},
		computed: {
			...mapGetters({
				cartNum: 'cartNum',
				isLogin: 'isLogin'
			})
		},
		onShow() {
			this.getuserinfo();
			this.getnoticeList();
		},
		methods:{
			getnoticeList(){
				noticeList().then(res=>{
					this.nlist = res.data.data;
				})
			},
			pathclick(path){
				// if( path == '/pages/other/message' )  return this.$util.Tips({ title : '功能开发中...' })
				// console.log(url);
				uni.navigateTo({
					url: path
				})
			},
			getuserinfo(){
				getUserInfo().then(res=>{
					this.userinfo = res.data;
				})
			},
			// 编辑页面
			goEdit() {
				if (this.isLogin == false) {
					toLogin();
				} else {
					uni.navigateTo({
						url: '/pages/users/user_info/index'
					})
				}
			},
		}
	}
</script>

<style lang="scss">
	page{  
		background-color: #f2f2f2 !important;
	}
	.user{
		
		.navbar{
			width: 100%;
			background-color: #ffffff;
			position: fixed;
			left: 0;
			right: 0;
			top: 0;
			z-index: 999;
			
			.navbarH{
				width: 100%;
				height: 100rpx;
				
				.title{
					color: #333;
					font-size: 40rpx;
					font-weight: bold;
				}
			}
		}
		
		.top{
			width: 100%;
			height: 300rpx;
			background-color: #ffffff;
			
			.avatar{
				width: 140rpx;
				height: 140rpx;
				border-radius: 50%;
				overflow: hidden;
				
				image{
					width: 100%;
					height: 100%;
				}
			}
			
			.vip-icon{
				width: 88rpx;
				height: 36rpx;
			}
			.message-icon{
				width: 60rpx;
				height: 60rpx;
			}
			.msg{
				
			}
		}
		
		.info{
			width: 540rpx;
			height: 320rpx;
			border-radius: 50rpx;
			box-shadow: 1px 2px 8px 0px rgba(247, 118, 0, 0.1);
			background-color: #ffffff;
			position: relative;
			
			.info01{
				width: 178rpx;
				height: 240rpx;
				position: absolute;
				bottom: 30rpx;
				right: 30rpx;
			}
			.pipei{
				width: 240rpx;
				height: 68rpx;
				text-align: center;
				line-height: 68rpx;
				color: #FD7D36;
				background: rgba(253, 125, 54, 0.15);
				border-radius: 34rpx;
			}
		}
		.today{
			width: 540rpx;
			height: 320rpx;
			border-radius: 50rpx;
			box-shadow: 1px 2px 8px 0px rgba(247, 118, 0, 0.1);
			background-color: #ffffff;
			padding: 40rpx;
			
			.pictrue{
				width: 140rpx;
				height: 120rpx;
				border-radius: 10px;
			}
		}
		
		.history{
			width: 130rpx;
			height: 320rpx;
			border-radius: 70rpx;
			box-shadow: 1px 2px 8px 0px rgba(247, 118, 0, 0.1);
			background-color: #ffffff;
			
			.history-icon{
				width: 88rpx;
				height: 88rpx;
			}
		}
		
		.cate-item{
			width: 200rpx;
			height: 220rpx;
			border-radius: 60rpx;
			background: #FFFFFF;
			box-shadow: 0px 2px 8px 0px rgba(247, 118, 0, 0.14);
			
			.icon{
				width: 92rpx;
				height: 92rpx;
			}
		}
		
		.catelist{
			width: 690rpx;
			height: 460rpx;
			border-radius: 64rpx;
			background: #FFFFFF;
			box-shadow: 0px 2px 8px 0px rgba(247, 118, 0, 0.14);
			margin: 30rpx auto;
			
			.item{
				width: 33%;
				height: 220rpx;
				
				.icon{
					width: 92rpx;
					height: 92rpx;
				}
			}
		}
		
		.guanjia-nav{
			width: 690rpx;
			background-color: #ffffff;
			border-radius: 50rpx;
			margin: 30rpx auto;
			padding: 40rpx;
			position: relative;
			
			.liji{
				width: 212rpx;
				height: 56rpx;
				border-radius: 28rpx;
				text-align: center;
				line-height: 56rpx;
				color: #FD7D36;
				background: rgba(253, 125, 54, 0.15);
				margin-top: 30rpx;
			}
			.info01{
				width: 178rpx;
				height: 185rpx;
				position: absolute;
				bottom: 0;
				right: 75rpx;
			}
		}
		
		.message-nav{
			position: relative;
			
			.msg{
				width: 50rpx;
				height: 50rpx;
				border-radius: 50%;
				color: #ffffff;
				font-size: 22rpx;
				background: #FF301A;
				text-align: center;
				line-height: 50rpx;
				position: absolute;
				top: -30rpx;
				right: 0;
			}
			
		}
		
		
	}
</style>

